<template>
    <div class="account">
        <div class="background-bg"></div>
        <div class="modal-wrapper">
            <div class="modal-bar">
                结算
                <img src="../../static/img3/close.png"  @click="isBuying">
            </div>
            <div class="scroll">
                <div class="scroll-content">
                    <div class="scroll-row">
                        <div class="scroll-name">
                            <span class="name">育知同创</span>
                            18888888888
                        </div>
                        <div class="scroll-address">北京市 昌平区 物美大卖场二楼育知同创</div>
                        <img class="img3" src="../../static/img3/xia.png">
                    </div>
                    <div class="scroll-r">
                        <div class="checkout-title">优惠卷</div>
                        <div class="checkout-content">0张可用</div>
                    </div>
                    <div class="checkout-row">
                        <div class="checkout-row-title">松鼠币抵现</div>
                        <div>
                            <div class="checkout-row-content">可以使用270松鼠币抵0.27元</div>
                            <label class="checkout-toggle">
                                <input type="checkout">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="scroll-r ff">
                        <div class="checkout-title">发票</div>
                        <div class="checkout-content">不需要发票</div>
                    </div>
                    <div class="scroll-r ff">
                        <div class="checkout-title">商品清单</div>
                        <div class="checkout-content">共1件</div>
                    </div>
                    <div class="checkout-row">
                        <div class="checkout-title">留言:</div>
                        <div class="checkout-inout">
                            <input class="input-order" type="text" placeholder="订单补充说明">
                        </div>
                    </div>
                    <div class="scroll-r ff">
                        <div class="checkout-title">支付方式</div>
                        <div class="checkout-payment">支付宝</div>
                    </div>
                    <div class="scroll-r ff">
                        <div class="checkout-title">应付金额</div>
                        <p class="checkout-amount">
                            <span class="amount-cash">333</span>
                            <span class="amount-freight">(含运费:8.00)</span>
                            <p class="amount-tips">点击查看价格明细</p>
                        </p>
                    </div>
                </div>
            </div>
            <div class="keyboard-open">
                <router-view></router-view>
                <router-link :to="{path:'/userOrder',query:{type:'pay'}}">
                    <button  class="buttona"  @click="confirm">确认付款 </button>                       
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {

    data() {
        return {   
             isBuy:true,          
        }
    },
    props:["detailData"],
    methods: {
        isBuying(){
            this.$emit("closing")
        },
        confirm(){
            console.log("confirm")
            let arr = [];
            arr.push(this.detailData);
            console.log(1,arr);
            this.$store.commit("account",arr);

        }
    },
    computed: {        
    },
}
</script>

<style scoped>
.account{
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    bottom:0;
}
    
.background-bg {
    position: absolute;
    opacity: .7;
    background-color: #000;
    z-index: 100;
    top: 0;
    width: 100%;
    height: 36%;
}

.modal-wrapper {
    height: 64%;
    min-height: 0;
    max-height: 100%;
    top: auto;
    bottom: 0;
    background-color: #fff;
    position: absolute;
    width: 100%;
    font-size: 15px;
    z-index: 999;
}

.modal-bar {
    position: relative;
    z-index: 10;
    padding-left: .15rem;
    height: .434rem;
    line-height: .434rem;
    color: #000;
    background-color: #fff;
    font-size: 14px;
    text-align: left;
}

.modal-bar img {
    float: right;
    margin: .15rem .15rem 0 0;
}

.scroll {
    position: absolute;
    right: 0;
    left: 0;
    overflow: hidden;
    margin-top: -.01rem;
    padding-bottom: .01rem;
    width: auto;
    height: auto;
    bottom: .5rem;
    top: .54rem;
}

.scroll-row {
    margin: 0;
    padding: .1rem .2rem .1rem .1rem;
    height: auto;
    line-height: inherit;
    background: url(../../static/img3/xiantiao.png) top left repeat-x, url(../../static/img3/xiantiao.png) bottom left repeat-x;
    background-size: .78rem .03rem, .78rem .03rem;
    font-size: 14px;
}

.scroll-name {
    margin-bottom: .0rem;
    line-height: 1.25em;
}

.scroll-name .name {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scroll-address {
    margin-bottom: 0;
    line-height: 1.5em;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scroll-r {
    box-sizing: content-box;
    position: relative;
    padding: .05rem .2rem .05rem 0;
    margin-left: .1rem;
    height: 2em;
    line-height: 2em;
}

.checkout-title {
    float: left;
}

.checkout-content {
    float: right;
    color: #ee2e52;
}

.checkout-row {
    padding-right: .5rem;
    box-sizing: content-box;
    position: relative;
    padding: .05rem .82rem .05rem 0;
    margin-left: .1rem;
    height: 2em;
    line-height: 2em;
}

.checkout-row-content {
    float: right;
}

.checkout-row-title {
    float: left;
}

.checkout-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.21rem;
}

.checkout-toggle input {
    display: none;
}

.track {
    border-color: #77bc1f;
    background-color: #77bc1f;
    display: inline-block;
    box-sizing: border-box;
    width: .65rem;
    height: .4rem;
    border: solid 2px #e6e6e6;
    border-radius: 20px;
    content: ' ';
    cursor: pointer;
    pointer-events: none;
}

.handle {
    position: absolute;
    display: block;
    width: .3rem;
    height: .3rem;
    border-radius: .3rem;
    background-color: #fff;
    top: .05rem;
    left: .27rem;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .15);
}

.handle:before {
    position: absolute;
    top: -4px;
    left: -21.5px;
    padding: 18.5px 34px;
    content: " ";
}

.ff .checkout-content {
    color: #000;
}

.checkout-inout {
    margin-left: 2.5em;
}

.input-order {
    width: 100%;
    height: auto;
    padding: 0 .05rem;
    line-height: inherit;
    border: none;
    background-color: transparent;
}

.checkout-row .checkout-payment {
    background-image: url(../../static/img3/pay.png);
}

.checkout-payment {
    float: right;
    padding-left: 28px;
    background-repeat: no-repeat;
    background-size: 24px auto;
    background-position: left center;
}

.checkout-amount {
    float: right;
    margin-bottom: 0;
    height: 1em;
    line-height: 1em;
}

.amount-cash {
    float: left;
    color: #ee2e52;
}

.amount-freight {
    float: left;
    padding-left: 3px;
    color: #999;
}

.amount-tips {
    clear: right;
    float: right;
    margin-bottom: 0;
    line-height: 1.4em;
    font-size: 11px;
}

.img3 {
    position: absolute;
    right: 8px;
    top: 3%;
    height: 16px;
    line-height: 16px;
    margin-top: -8px;
}

.keyboard-open {
    height: .7rem;
    padding: .08rem .15rem;
    background: 0 0!important;
    bottom: 0;
    position: absolute;
    border-top-width: 1px;
    border-bottom-width: 0;
    border: none;
    user-select: none;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 9;
    box-sizing: border-box;
    width: 100%;
}

.keyboard-open .buttona {
    height: .535rem;
    min-height: .35rem;
    margin: 0;
    line-height: .33rem;
    font-size: 17px;
}

.buttona {
    border-color: transparent;
    background-color: #77bc1f;
    color: #fff;
    width: 100%;
    border-radius: 4px;
}
</style>